<!DOCTYPE html>
<html>

<head>
  <title> 自定义动画 </title>
  <meta charset="utf-8">
  <script src="js/jquery-1.11.3.js"></script>
  <style>
    #d1 {
      border: 1px solid #aaa;
      border-radius: 6px;
      background: #eee;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 120px;
      left: 0;
      transition: all 2s linear;
    }
  </style>
</head>

<body>
  <h1>animate</h1>
  <button id="btn1">启动动画</button>
  <button id="btn2">停止动画</button>
  <div id="d1">abcd</div>
  <script>
    //测试animate支持哪些属性
    //测试启动和停止动画
    //测试延迟执行
    $("#btn1").click(function () {
      // $("#d1").animate({
      //    //只支持单个属性的css属性
      //    //width/height/left/right/top/bottom/padding/opacity/fontSize/borderRadius
      //    // left: "500px"
      //    // borderRadius: 25
      //    width: 500
      // }, 2000, function () {
      //    console.log("111111111111");
      // });

      //css
      //#d1中有transition
      $("#d1")
        // .css("width", 400);
        // .css("background-color", "red");
        .css("transform", "rotate(180deg)")
    });
  </script>
</body>

</html>